<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品管理table</title>
<link rel="stylesheet" href="../layui/css/layui.css">
<link rel="stylesheet" href="../layer/theme/default/layer.css">
<script type="text/javascript" src="../layer/layer.js"></script>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<style>
.layui-table-box{
	width:100%;
}
</style>
</head>
<body style="background:#EEEEEE">
<div style="padding:10px;"><button class="layui-btn layui-btn-normal" id="btn2" style="font-size:14px;margin-left:20px;"><i class="layui-icon">&#xe654;</i>添加商品</button>
<button id="f5" type="button" class="layui-btn layui-btn-primary" style="font-size:14px;margin-left:20px;"><i class="layui-icon">&#xe9aa;</i></button>
<span style="color:#909090">（未显示数据是接口异常，请尝试刷新）</span>
</div>
<table style="width:100%" class="layui-hide" id="test" lay-filter="demo"></table>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="imgurl">
	<img src="../{{d.Cimgurl}}" />
</script>
 

<script src="../layui/layui.all.js"></script>
<script src="../layer/mobile/layer.js"></script>

<script>

layui.config({
  version: '1534457846312' //为了更新 js 缓存，可忽略
});
 
layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function(){
  var laydate = layui.laydate //日期
  ,laypage = layui.laypage //分页
  layer = layui.layer //弹层
  ,table = layui.table //表格
  ,carousel = layui.carousel //轮播
  ,upload = layui.upload //上传
  ,element = layui.element; //元素操作
  
  //执行一个 table 实例
  table.render({
    elem: '#test'
    ,method:'post'
    ,dataType:'json'
    ,url: 'a.commodityshow' //数据接口
    ,limit:10
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'cser_num', title: '商品序号', width:120, sort: true, fixed: 'left'}
      ,{field: 'cid', title: '商品id', width:120, sort: true}
      ,{field: 'cname', title: '商品名', width:180}
      ,{field: 'cprice', title: '单价', width:80} 
      ,{field: 'cremark', title: '详情', width: 250}
      ,{field: 'cclassify', title: '分类', width: 120, sort: true}
      ,{field: 'Cimgurl', title: '商品图片展示路径', width: 360, sort: true}
      ,{field: 'Cimgurl', title: '商品图片展示', width: 200,toolbar :'#imgurl'}
      ,{fixed: 'right', width: 200, align:'center', toolbar: '#barDemo'}
    ]]
  });
  
  //监听工具条
  table.on('tool(demo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
    var data = obj.data, //获得当前行数据
    layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === 'detail'){} 
    else if(layEvent === 'del'){
		layer.confirm('真的要删除么', function(index){
			$.ajax({
	    		type: "get",
	    		url: "a.commoditydelete",
	    		dataType: 'json',
	    		data: {"commodityid": data.cid},
				success:function(data){
					alert(data);
				}
			})
	        obj.del(); //删除对应行（tr）的DOM结构
	        layer.close(index);
	        //向服务端发送删除指令
	      });
    } else if(layEvent === 'edit'){
    	localStorage.name = data.cid;
    	layer.open({
   			type: 2,
   			area: ['360px', '440px'],
   			title:"输入修改的信息",
    		content: 'commodityupddd.html' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
    		}); 
    	}
  });
  
  //分页
  laypage.render({
    elem: 'pageDemo' //分页容器的id
    ,limit:10
    ,skin: '#1E9FFF' //自定义选中色值
    //,skip: true //开启跳页
    ,jump: function(obj, first){
      if(!first){
        layer.msg('第'+ obj.curr +'页');
      }
    }
  });

});
</script>
<script type="text/javascript">
	$(function(){
		$("#btn2").click(function(){
			location.href="commodityadd.html";
		})
		$("#f5").click(function(){
			location.href="commodity.html";
		})
	})
</script>
</body>
</html>        
